<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="歌曲列表" name="1">
      <div v-if="activeName === '1'"><List /></div>
    </el-tab-pane>
    <el-tab-pane :label="count" name="2">
      <div v-if="activeName === '2'"><Play @count="getCount" /></div>
    </el-tab-pane>
    <el-tab-pane label="专辑详情" name="3">
      <div v-if="activeName === '3'"><Item /></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  components: {
    List: () => import('./albumCom/songList.vue'),
    Play: () => import('./albumCom/playList.vue'),
    Item: () => import('./albumCom/item.vue'),
  },
  data() {
    return {
      activeName: '1',
      count: '评论',
    };
  },
  methods: {
    getCount(data) {
      this.count = '评论' + `(${data})`;
    },
  },
};
</script>

<style scoped>
</style>
